//Take care of HTML Model Stuff here

function Model_init()
{
    //Initializing the area CSS-class ojects
    Model_populateToolbar();
    Model_populateDocumentInfo();
    Model_populateNotebooks();
    Model_populateMindMap();
    Model_populateNotePod();
    Model_populateBookmarks();
    Model_populateHelp();
}

function Model_populateToolbar()
{
    $('Toolbar').innerHTML =
      '<img src="app/button_document.png" onclick="newFile()" title="New Notebook">'+
      '<img src="app/button_save.png" onclick="saveFile()" title="Save Notebook">'+
      '<img src="app/button_memonaut.png" id="menuMemonaut" title="Note Menu">'+
      '<img src="app/button_snapshot.png" onclick="exportView()" title="Export Snapshot View">'+
      '<img src="app/help.png" height="32px" width="32px" onclick="toggleHelp();" title="Help">';
}

function Model_populateDocumentInfo()
{
    if($('DocumentInfo').down('.areatitle'))
        return;
    
    $('DocumentInfo').insert({top:
      '<div class="areatitle"><center><img src="app/memonaut.png" onclick="about();" ></center></div>'+
      '<div class="areacontent">'+
      '<center>'+
        '<img src="app/notebook.png" title="Double-click content to change filename">'+
        '<span id="DocFilename" class="field eip" style="overflow: hidden;">memonaut.html</span>'+
      '</center>'+
      '</div>'});
}

function Model_populateNotebooks()
{
    $('Notebooks').innerHTML =
      '<div class="areatitle"><img src="app/notebook.png" class="areatitle" onclick="restoreArea(this)" title="Click to fold/expand"> Notebooks</div>' +
      '<div class="areacontent"><ol id="listNotebooks"></ol></div>';

}

function Model_populateMindMap()
{
    if($('MindMap').down('.areatitle'))
        return;
    
    $('MindMap').insert({top:
      '<div class="areatitle">'+
      '<center>'+
        '<img src="app/jot.png" title="Double-click content to change title.">'+
        '<span id="DocTitle" class="field eip" >Memonaut Untitled Notebook'+
        '</span>'+
      '</center>'+
      '</div>'
    });
}


function Model_populateBookmarks()
{
    if($('Bookmarks').down('.areatitle'))
        return;
    $('Bookmarks').insert({top:
                  '<div class="areatitle"><img src="app/bookmark.png" onclick="restoreArea(this)" title="Click to fold/expand"> Bookmarks</div>'
    });
}

function Model_populateNotePod()
{
    $('NotePod').innerHTML =
      '<div class="areatitle"><img src="app/wizard.png" onclick="restoreArea(this)" title="Click to fold/expand"> Note Pod</div>'+
      '<div class="areacontent">'+
      '<form id="formScrap"></form>'+
      '<br>'+
      '</div>';
    $('formScrap').innerHTML =
        '<textarea class="" style="float: left;" id="textareaScrap" rows="4" cols="35" onclick="textareaScrap_onClick(this)">What\'s on your mind?</textarea>'+
        '<input onclick="AddNote_onClick()" value="Add Note" style="clear: left; float: right; margin-right: 2%;" type="button">'+
        '<select id="dropdownAddMode" style="clear: left; float: right;" onchange="changeAddMode(this)">'+
          '<option value="eCurrentScrapAfter">After Current Note</option>'+
          '<option value="eCurrentScrapInto">Into Current Note</option>'+
          '<option value="eScrapbookTop">Notebook Top</option>'+
          '<option value="eScrapbookLast">Notebook Bottom</option>'+
        '</select>';
}

function Model_populateHelp()
{
      $('Help').innerHTML =
          '<div class="areatitle"><img src="app/help.png" class="areatitle" onclick="restoreArea(this)" title="Click to fold/expand"> Help</div>'+
            '<div class="areacontent" id="contentHelp" ></div>';
        
     $('contentHelp').innerHTML = '<iframe src="app/help.html" scrolling="auto" frameborder=0 width="100%" height="100%"></iframe>';
}


